<template>
  <div class="news-detail">
    <nav-bar :title="title" />
    <content-body>
      <div class="news-title">
        <p class="title">{{newsDetail.title}}</p>
        <p class="info">
          <span>{{newsDetail.click}}次点击</span>
          <span>分类：xxx</span>
          <span>发布时间：{{newsDetail.add_time | convertTime('YYYY年MM月DD日')}}</span>
        </p>
      </div>
      <div class="news-content" v-html="newsDetail.content">新闻明细</div>
    </content-body>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: '我试试',
      newsDetail: {}
    }
  },
  created () {
    let id = this.$route.query.id

    this.$axios
      .get('getnew/' + id)
      .then(res => {
        this.newsDetail = res.data.message[0]
        console.log(this.newsDetail)
      })
      .catch(err => {
        console.log(err)
      })
  },
  beforeRouteEnter (to, from, next) {
    // 1.from为空，复制粘贴url到地址栏
    // 2.from新闻列表 title=新闻详情
    // 3.from商品详情 title=商品图文详情
    console.log(to)
    console.log(from)
    var title = ''
    if (to.name === 'news.detail') {
      title = '新闻详情'
    } else if (to.name === 'goods.info') {
      title = '商品图文详情'
    } else {
      title = '我是详情'
    }
    next(vm => {
      console.log(vm)
      vm.title = title
    })
  }
}
</script>
<style lang="less">
.news-detail {
  margin: 0 0 3.4375rem 0;
  img {
    max-width: 100%;
    object-fit: fill;
    vertical-align: middle;
  }
  .news-title {
    font-size: 1.3rem;
    text-align: center;
    margin: 0 0 1rem 0;
  }
  .title {
    margin: 0 0 0.8rem 0;
  }
  .info {
    font-size: 0.9rem;
    color: #ddd;
  }
  .news-content {
    p {
      line-height: 157%;
    }
  }
}
</style>
